<template>
	<!-- 有上门时间 日期 上传图片 -->
	<view class="releaseOrder">
		<image class="top-img" v-if="imgs && imgs[0]" :src="$wanlshop.oss(imgs[0].img)" mode=""></image>
		<view class="box2 pl32 pr32 mb36">
			<view class="br24 formBox">
				<view class="flex_sa" v-if="option.type == 0">
					<view class="qw" @click="work_type = 0" :class="{'qwActive' :work_type == 0}">
						全屋新装
					</view>
					<view class="qw" @click="work_type = 1" :class="{'qwActive' :work_type == 1}">
						全屋翻新
					</view>
				</view>
				<view class="c3d f28 " :class="{'mt36':option.type == 0}">
					<text class="error">*</text>
					服务描述
				</view>
				<u-input class="mt16 utextareas" v-model="service_des" placeholder="请补充说明您的服务内容，好饰更能明白您的需求~"
					type="textarea" clearable :auto-height='true' maxlength="500" height="90" />
				<view class="flex_ac mt32">
					<view class="c3d f28">
						<text class="error">*</text>
						联系电话
					</view>
					<u-input class="ml20" clearable type="number" v-model="mobile" placeholder="联系电话"
						:auto-height='true' />
				</view>
				<view class="flex_ac mt32">
					<view class="c3d f28">
						<text class="error">*</text>
						联系地址
					</view>
					<u-input class="ml20" @click="btnClick1" placeholder="选择地区" @focus="heide" v-model="addressData.pcd">
					</u-input>

				</view>
				<view class="flex_ac mt32">
					<view class="c3d f28 mr20">
						<text class="error">*</text>
						详细地址
					</view>
					<u-input class="flex1" v-model="addressData.address" clearable placeholder="单元号/门牌号" type="textarea"
						:auto-height='true' maxlength="500" height="90" />
				</view>
				<view class="tac mt36 btnSub">
					<image @click="submit" style="width: 496rpx;height: 130rpx;"
						src="https://img.aibbyp.com/wechatUser/ljmyy.png" mode="">
					</image>
				</view>

			</view>
		</view>
		<image class="mt36" style="width: 100%;" v-if="imgs && imgs[1]" :src="$wanlshop.oss(imgs[1].img)"
			mode="widthFix"></image>

	</view>
</template>

<script>
	export default {

		data() {
			return {
				service_des: '',
				mobile: uni.getStorageSync("wanlshop:user").mobile,
				imgs: {},
				addressData: {
					pcd: '',
					address: ''
				},
				work_type: 0,
				btnLoading: false,
				option: {},

			}
		},
		onLoad(option) {
			this.option = option
			this.getbanner(option.type)

		},
		methods: {
			submit() {
				if (!this.service_des) {
					this.$wanlshop.msg('请输入服务描述')
					return
				}
				if (!this.mobile) {
					this.$wanlshop.msg('请输入联系电话')
					return
				}
				if (!this.addressData.longitude) {
					this.$wanlshop.msg('请选择联系地址')
					return
				}
				if (!this.addressData.address) {
					this.$wanlshop.msg('请输入详细地址F')
					return
				}
				this.$api.post({
					url: '/user/addTask',
					data: {
						type: Number(this.option.type) + 1,
						work_type: this.option.type == 0 ? this.work_type + 1 : 0,
						service_des: this.service_des,
						mobile: this.mobile,
						pro: this.addressData.province,
						city: this.addressData.city,
						area: this.addressData.district,
						address: this.addressData.address,
						lon: this.addressData.longitude,
						lat: this.addressData.latitude,
					},
					success: (res) => {
						this.addressData = {
							pcd: '',
							address: ''
						}
						this.service_des = ''
						this.$wanlshop.msg('预约成功，稍后会有平台人员联系您，请保持手机畅通')
					},
					fail: res => {
						console.log(res, '-->')
					}
				});
			},
			btnClick1() {
				
				let _this = this
				uni.chooseLocation({
					success: async function(res) {
						console.log('位置名称：' + res.name);
						console.log('详细地址：' + res.address);
						console.log('纬度：' + res.latitude);
						console.log('经度：' + res.longitude);

						if (res) {
							const a = await _this.$wanlshop.qqmapsdkAddresses(res.longitude, res.latitude)
							let data = a
							_this.addressData.longitude = res.longitude
							_this.addressData.latitude = res.latitude
							_this.addressData.pcd =
								`${data.ad_info.province} ${data.ad_info.city} ${data.ad_info.district}`
							_this.addressData.adcode = data.ad_info.adcode;
							_this.addressData.address = res.address;
							_this.addressData.city = data.ad_info.city;
							_this.addressData.citycode = data.ad_info.adcode.slice(0, 4) + '00';
							_this.addressData.country = data.ad_info.nation
							_this.addressData.country = data.ad_info.nation
							_this.addressData.default = _this.addressData.default
							_this.addressData.district = data.ad_info.district
							_this.addressData.formatted_address = data.ad_info.name
							_this.addressData.location = `${res.longitude},${res.latitude}`
							_this.addressData.province = data.ad_info.province
							console.log('地址信息：', _this.addressData);
							uni.hideKeyboard()
						}
					}
				})
			},
			heide() {
				uni.hideKeyboard()
			},

			getbanner(type) {
				this.$api.get({
					url: '/wanlshop/banner/index?position=' + (type - 0 + 4),
					success: res => {
						if (res[0]) {

							this.imgs = res
						}
					}
				})
			},

		},
	}
</script>

<style lang="scss" scoped>
	.btnSub {
		padding-bottom: env(safe-area-inset-bottom);
		width: 100%;
		height: 100%;
		position: sticky;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #fff;
		z-index: 2;

		.btn::after {
			border: none;
		}

		.btn {
			width: 600rpx;
			height: 62rpx;
			background: linear-gradient(264deg, #3065FA 0%, #3065FA 14%, #2D8DF4 99%);
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #FFFFFF;

			button {
				background: linear-gradient(264deg, #3065FA 0%, #3065FA 14%, #2D8DF4 99%);
			}
		}
	}

	.releaseOrder {

		.qw {
			border: 2rpx solid #BABABA;
			color: #474747;
			background-color: #fff;
			padding: 24rpx 46rpx;
			font-size: 36rpx;
			border-radius: 16rpx;
		}

		.qwActive {
			background: rgba(255, 150, 163, 0.08);
			border: 2rpx solid #EE1F39;
			color: #EE1F39;
		}

		.top-img {
			width: 100%;
			height: 446rpx;
			position: relative; // 添加定位
			z-index: 1; // 设置较低的层级
		}

		.top-titile {
			width: 100%;
			position: absolute;
			bottom: 0;
			background: #fff;
			padding: 36rpx 46rpx;
			border-radius: 34rpx 34rpx 0 0;
		}

		.box2 {
			margin-top: -60rpx; // 微调位置，使其覆盖在图片上方
			position: relative; // 添加定位
			z-index: 2; // 设置较高的层级

			.formBox {
				background: #fff;
				padding: 32rpx 28rpx;
				box-shadow: 0rpx 8rpx 16rpx 0rpx rgba(0, 0, 0, 0.1);

				::v-deep.u-input {
					background: #F4F4F4;
					padding: 16rpx 24rpx !important;
					border-radius: 20rpx 20rpx 20rpx 20rpx;
				}

				.utextareas {
					padding: 26rpx 24rpx !important;
				}
			}
		}

		.imgxqt {
			width: 100%;
			height: 708rpx;
		}
	}
</style>